<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
            background: #f5f5f5;
        }
        #app{
            margin: 0 auto;
            margin-bottom: 20px;
            text-align: center;
            max-width: 560px;
            padding: 0 10px;
        }
        .center {
            text-align: center;
            justify-content: center;
        }
        .panel {
            margin-top: 16px;
            border-radius: 5px;
            background: #fff;
            display: inline-block;
            width: 100%;
            box-shadow: 0 0 5px 0px rgba(0,0,0,.3);
            position: relative;
        }
        .panel-require:after {
            position: absolute;
            top: 6px;
            left: 6px;
            color: #f00;
            content: '*'
        }
        .form-item {
            width: 100%;
            display: flex;
            padding: 20px 0;
        }
        .form-item-label {
            width: 100px;
        }
        .form-item-content {
            flex: 1;
            text-align: left;
        }
        input,select {
            width: 90%;
        }
        textarea {
            width: 90%;
            height: 80px;
        }
        @media (max-width: 600px) {
        
            .form-item {
                flex-direction: column;
            }
            .form-item-content {
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <h4 class="center">登录页面</h1>
    <div id="app">
        <div class="panel panel-require">
            <div class="form-item">
                <div class="form-item-label">账号: </div>
                <div class="form-item-content">
                    <input id="account" type="text" placeholder="账号">
                </div>
            </div>
        </div>
        <div class="panel panel-require">
            <div class="form-item">
                <div class="form-item-label">密码: </div>
                <div class="form-item-content">
                    <input id="password" type="text" placeholder="密码">
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="form-item center">
                <input type="button" id="submit" style="background-color:#68a3fa;color: #fff; line-height: 40px; font-size: 20px;" value="提交">
            </div>
        </div>
    </div>

    <script>
        var submitBtn = document.getElementById('submit')

        submitBtn.onclick = function () {
            var account = document.getElementById('account').value
            var password = document.getElementById('password').value

            var url = '/login'
            var postBody = {
                account: account,
                password: password,
            }

            // POST
            fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(postBody),
            }).then(function (resp) {
                if (resp.status === 200) {
                    return resp.json()
                }
                alert('登录失败')
                throw new Error('status wrong')
            }).then(function (data) {
                var token = data.token
                alert('登录成功, token为' + token)
            })
        }
    </script>
</body>
</html>